<template>
  <div class="register">
    <div class="register-container">
      <el-tabs v-model="activeName" class="register-tab" @tab-click="handleClick">
        <el-tab-pane label="1、组织主管理者" name="first">
          <el-form ref="registerForm" class="registerForm" :model="registerForm" :rules="registerFormRules">
            <el-form-item prop="username">
              <el-input v-model="registerForm.phone" class="user-phone" placeholder="手机号码（作为企业主管理员）" />
            </el-form-item>
            <el-form-item prop="username">
              <div class="user-phone">
                <el-input v-model="registerForm.code" placeholder="输入验证码" />
                <div class="code-btn">获取验证码</div>
              </div>
            </el-form-item>
            <div class="submit" @click="nextStep('second')">下一步</div>
            <div class="register-tips">
              <div class="tips-left">已有帐号？</div>
              <div class="tips-right" @click="land">去登陆</div>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="2、组织信息" name="second">
          <el-form ref="registerForm" class="registerForm" :model="registerForm" :rules="registerFormRules">
            <el-form-item prop="username">
              <el-select v-model="registerForm.region" class="user-phone" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item prop="username">
              <el-input v-model="registerForm.phone" class="user-phone" placeholder="企业组织简称" />
            </el-form-item>
            <el-form-item prop="username" class="user-name">
              <el-input v-model="registerForm.phone" class="user-phone" placeholder="联系人姓名" />
            </el-form-item>
            <div class="agreement">
              <el-checkbox label="阅读并接受" name="type" />
              <div class="agreement-text">（如是观影企业版后台规范协议）</div>
            </div>
            <div class="submit" @click="nextStep('third')">下一步</div>
            <div class="register-tips">
              <div class="tips-left">已有帐号？</div>
              <div class="tips-right" @click="land">去登陆</div>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="3、注册完成" name="third">
          <div class="complete">
            <img class="complete-img" src="@/assets/img/complete.png" alt="">
            <div class="complete-title">注册完成</div>
            <div class="complete-tips">请使用主管理员的手机号码登录后台</div>
            <div class="complete-submit" @click="land">去登陆</div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data() {
    return {
      activeName: 'first',
      registerForm: {
        phone: '',
        code: '',
        region: ''
      },
      registerFormRules: {}
    }
  },
  methods: {
    handleClick() {},
    submit() {},
    land() {
      this.$router.push({ path: '/login' })
    },
    nextStep(type) {
      this.activeName = type
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

  .register{
    min-height: 100%;
    min-width: 1200px;
    display: flex;
    justify-content: center;
    background-color: #F3F6FD;
    .register-container{
      width: 1200px;
      height: 100%;
      display: flex;
      padding-top: 48px;
      margin-top: 16.7vh;
      justify-content: center;
      border-radius: 20px;
      background-color: #FFFFFF;
      ::v-deep .register-tab{
        .el-tabs__header{
          margin: 0;
          .el-tabs__nav-wrap::after{
            content: "";
            height: 0;
          }
          .el-tabs__active-bar{
            height: 0;
          }
          .is-top #tab-first{
            width: 390px;
            height: 0;
            text-align: center;
            line-height: 56px;
            border-width:0 37px 56px 0;
            border-style: none solid solid;
            border-color: transparent transparent #D2E0FF;
          }
          #tab-second{
            position: relative;
            width: 390px;
            height: 56px;
            text-align: center;
            line-height: 56px;
          }
          #tab-second:after{
            content: "";
            position: absolute;
            top: 0;
            left: -10px;
            width: 390px;
            height: 56px;
            z-index: -1;
            -webkit-transform: skew(33deg);
            -moz-transform: skew(33deg);
            -o-transform: skew(33deg);
            background-color: #D2E0FF;
          }
          #tab-third{
            position: relative;
            width: 390px;
            height: 56px;
            text-align: center;
            line-height: 56px;
            margin-left: -20px;
          }
          #tab-third:after{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 390px;
            z-index: -1;
            border-top: 56px solid #D2E0FF;
            border-left: 37px solid transparent;
          }
          .el-tabs__item{
            color: #333333;
            font-size: 18px;
            padding: 0;
          }
          .is-active{
            color: #ffffff;
            border-color: transparent transparent $bodyColor !important;
            #tab-third:after{
              border-top: 56px solid $bodyColor !important;
            }
          }
          .is-active:after{
            border-top: 56px solid $bodyColor !important;
          }
        }
        .registerForm{
          padding-top: 49px;
          .el-form-item{
            margin-bottom: 36px;
          }
          .user-phone{
            display: flex;
            width: 640px;
            height: 56px;
            margin: 0 auto;
            position: relative;
            .el-input__inner{
              width: 640px;
              height: 56px;
              font-size: 16px;
              line-height: 56px;
              padding: 0 24px;
              margin: 0 auto;
              border-radius: 8px;
              background-color: #ffffff;
              border: 1px solid #f5f5f5;
              box-shadow: 0px 0px 10px rgba(112, 112, 112, 0.1);
            }
            .code-btn{
              color: $bodyColor;
              font-size: 16px;
              line-height: 22px;
              position: absolute;
              top: 17px;
              right: 24px;
            }
          }
          .user-name{
            margin-bottom: 0;
          }
          .agreement{
            width: 640px;
            display: flex;
            margin: 14px auto 32px;
            .el-checkbox{
              color: #747474;
              .el-checkbox__input{
                line-height: 16px;
                .el-checkbox__inner{
                  width: 16px;
                  height: 16px;
                  border: 1px solid #8E8E93;
                  &:after{
                    left: 5px;
                    top: 2px;
                  }
                }
              }
              .el-checkbox__label{
                color: #747474 ;
                line-height: 20px;
              }
            }
            .agreement-text{
              color: $bodyColor;
              font-size: 14px;
              line-height: 20px;
              cursor: pointer;
            }
          }
          .submit{
            width: 320px;
            height: 56px;
            color: #ffffff;
            font-size: 20px;
            margin: 0 auto;
            cursor: pointer;
            line-height: 56px;
            text-align: center;
            border-radius: 8px;
            background-color: $bodyColor;
            box-shadow: 0px 0px 10px rgba(112, 112, 112, 0.1);
          }
          .register-tips{
            display: flex;
            align-content: center;
            justify-content: center;
            padding: 24px 0 36px;
            .tips-left{
              color: #747474;
              font-size: 18px;
              line-height: 25px;
              padding-right: 3px;
            }
            .tips-right{
              color: $bodyColor;
              font-size: 18px;
              font-weight: bold;
              line-height: 25px;
              cursor: pointer;
            }
          }
        }
        .complete{
          display: flex;
          flex-direction: column;
          .complete-img{
            width: 64px;
            height: 64px;
            border-radius: 50%;
            margin: 47px auto 28px;
          }
          .complete-title{
            color: #020002;
            font-size: 28px;
            font-weight: bold;
            line-height: 40px;
            padding-bottom: 14px;
            text-align: center;
          }
          .complete-tips{
            color: #707070;
            font-size: 18px;
            line-height: 25px;
            text-align: center;
          }
          .complete-submit{
            width: 320px;
            height: 56px;
            font-size: 20px;
            cursor: pointer;
            color: #ffffff;
            line-height: 56px;
            text-align: center;
            border-radius: 8px;
            margin: 36px auto 64px;
            background-color: $bodyColor;
            box-shadow: 0px 0px 10px rgba(112, 112, 112, 0.1);
          }
        }
      }
    }
  }
</style>
